<template>
  <Global>
    <div class="search">
      <SearchBar
        :hotSearch="hotSearchWord"
        :focus="searchFocus"
        ref="searchBar"
        @onClick="onSearchBarClick"
        @onConfirm="onConfirm"
        @onClear="onClear"
      />
      <TagGroup
        headerText="热门搜索"
        btnText="换一批"
        :value="hotSearch"
        v-if="!showSearchList"
        @onClick="onHotSearchClick"
        @onBtnClick="getHotSearch"
      />
      <TagGroup
        headerText="搜索历史"
        btnText="清空"
        :value="historySearch"
        v-if="!showSearchList"
        @onBtnClick="clearHistorySearch"
        @onClick="(item) => onHistoryClick(item)"
      />
      <SearchList :data="searchList" v-if="showSearchList" />
    </div>
  </Global>
</template>

<script>
import Global from "@/components/Global";
import SearchBar from "@/components/SearchBar";
import TagGroup from "@/components/TagGroup";
import SearchList from "@/components/SearchList";
import { getStorageSync, setStorageSync } from "@/api/wechat";
import { hotSearch, search } from "@/api";

const HOT_SEARCH_KEY = "historySearch";
const OPEN_ID_KEY = "openId";

export default {
  data() {
    return {
      hotSearch: null,
      hotSearchKey: null,
      historySearch: null,
      searchList: null,
      openId: null,
      page: 1,
      searchFocus: true,
    };
  },
  props: {
    hotSearchWord: {
      type: String,
      default: "",
    },
  },
  computed: {
    showSearchList() {
      let keys = [];
      if (this.searchList) {
        keys = Object.keys(this.searchList);
      }
      return this.searchList && keys.length > 0;
    },
  },
  components: {
    Global,
    SearchBar,
    TagGroup,
    SearchList,
  },
  mounted() {
    this.hotSearchWord = this.$route.query.hotSearch;
    this.historySearch = getStorageSync(HOT_SEARCH_KEY) || [];
    console.log("mounted historySearch", this.historySearch);
    this.openId = getStorageSync(OPEN_ID_KEY) || "";
    this.page = 1;
    this.searchList = null;
    this.getHotSearch();
    this.$refs.searchBar.setValue("");
    this.searchFocus = true;
  },
  methods: {
    onHistoryClick(keyword) {
      this.$refs.searchBar.setValue(keyword);
      this.onSearch(keyword, true);
    },
    onClear() {
      this.searchList = null;
    },
    onConfirm(keyword) {
      if (!keyword || keyword.trim().length === 0) {
        if (this.hotSearchWord && this.hotSearchWord.length > 0) {
          this.$refs.searchBar.setValue(this.hotSearchWord);
          keyword = this.hotSearchWord;
        } else {
          return;
        }
      }
      if (!this.historySearch.includes(keyword)) {
        this.historySearch.push(keyword);
        setStorageSync(HOT_SEARCH_KEY, this.historySearch);
      }
      this.searchFocus = false;
      this.onSearch(keyword, true);
    },
    onSearch(keyword, appendOpenId = false) {
      const params = {
        keyword,
        page: this.page,
      };
      if (appendOpenId && this.openId) {
        params.openId = this.openId;
      }
      search(params).then((response) => {
        if (response && response.data && response.data.error_code === 0) {
          this.searchList = response.data.data;
        }
      });
    },
    onSearchBarClick() {
      if (!this.searchFocus) {
        this.searchFocus = true;
      }
    },
    getHotSearch() {
      hotSearch().then((response) => {
        const _hotSearch = response.data.data;
        this.hotSearch = [];
        this.hotSearchKey = [];
        _hotSearch.forEach((i) => {
          this.hotSearch.push(i.title);
          this.hotSearchKey.push(i.fileName);
        });
      });
    },
    onHotSearchClick(keyword) {
      const index = this.hotSearch.indexOf(keyword);
      const fileName = this.hotSearchKey[index];
      this.$router.push({ path: "/pages/detail/main", query: { fileName } });
    },
    clearHistorySearch() {
      this.historySearch = [];
      setStorageSync(HOT_SEARCH_KEY, this.historySearch);
    },
  },
};
</script>